<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>算命网站 - 调试版本</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .debug-info {
            position: fixed;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-family: monospace;
            font-size: 12px;
            max-width: 300px;
            z-index: 1000;
        }
        .debug-toggle {
            position: fixed;
            bottom: 10px;
            right: 10px;
            background: #2196F3;
            color: white;
            border: none;
            padding: 8px 12px;
            border-radius: 4px;
            cursor: pointer;
            z-index: 1001;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🔮 在线算命 (调试版)</h1>
            <p>输入您的信息，获取今日运势</p>
        </header>
        
        <main>
            <form id="fortuneForm" class="fortune-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" name="name" required>
                    <span class="error-message" id="nameError"></span>
                </div>
                
                <div class="form-group">
                    <label for="birthDate">出生日期</label>
                    <input type="date" id="birthDate" name="birthDate" required>
                    <span class="error-message" id="birthDateError"></span>
                </div>
                
                <div class="form-group">
                    <label>性别</label>
                    <div class="radio-group">
                        <label class="radio-label">
                            <input type="radio" name="gender" value="male" required>
                            <span>男</span>
                        </label>
                        <label class="radio-label">
                            <input type="radio" name="gender" value="female" required>
                            <span>女</span>
                        </label>
                    </div>
                    <span class="error-message" id="genderError"></span>
                </div>
                
                <div class="form-group">
                    <label for="city">所在城市 <span class="optional">(可选)</span></label>
                    <input type="text" id="city" name="city" placeholder="如：北京、上海、广州">
                    <small class="form-hint">输入城市名获取当地天气运势，留空则使用当前位置</small>
                    <span class="error-message" id="cityError"></span>
                </div>
                
                <button type="submit" class="submit-btn">
                    <span class="btn-text">开始算命</span>
                </button>
            </form>
        </main>
    </div>
    
    <!-- 调试信息面板 -->
    <div id="debugInfo" class="debug-info" style="display: none;">
        <div>调试信息:</div>
        <div id="debugContent"></div>
    </div>
    
    <button class="debug-toggle" onclick="toggleDebug()">调试</button>
    
    <script>
        // 调试面板控制
        function toggleDebug() {
            const debugInfo = document.getElementById('debugInfo');
            debugInfo.style.display = debugInfo.style.display === 'none' ? 'block' : 'none';
        }
        
        // 更新调试信息
        function updateDebugInfo(info) {
            const debugContent = document.getElementById('debugContent');
            if (debugContent) {
                debugContent.innerHTML += '<div>' + new Date().toLocaleTimeString() + ': ' + info + '</div>';
                debugContent.scrollTop = debugContent.scrollHeight;
            }
        }
        
        // 重写console.log以显示在调试面板
        const originalLog = console.log;
        console.log = function(...args) {
            originalLog.apply(console, args);
            updateDebugInfo(args.join(' '));
        };
        
        const originalError = console.error;
        console.error = function(...args) {
            originalError.apply(console, args);
            updateDebugInfo('ERROR: ' + args.join(' '));
        };
    </script>
    
    <script src="debug-script.js"></script>
</body>
</html>